<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" th:href="@{/css/BMyself.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/BVideo.css}" />
</head>
<body style="background-color: #f9f9f9">
    <div class="container-fluid bmTopDiv">
        <div class="col-md-1 bmTopLogoFont">
            <h3>BhSyVideo</h3>
        </div>
        <div class="col-md-2 bmTopXxDiv">
            <ul class="">
                <li class="bmToplif"><a style="text-decoration: none;color: white" th:href="@{/bhsy/theMain}"> 首页</a></li>
            </ul>
        </div>
    </div>

    <div class="bMTopImgDiv">
        <div class="BMUserTopDiv">
            <img class="bMUserImg" th:src="@{/images/d.jpg}">
            <p>一老石上真男人</p>
        </div>
    </div>
    <div class="bMUserFsGz">
        <p>粉丝</p>
        <p>关注</p>
        <p th:if="${bmVideo==2}" th:text="${'点赞:'+bVideoSum.svUp}">点赞</p>
        <p th:if="${bmVideo==2}" th:text="${'播放量:'+bVideoSum.svNum}">播放量</p>
    </div>
    <div class="bMCollectBtmDiv">
        <div id="createNewConllect" class="bMCollectLeftDiv">
            <div style="font-size: 16px;text-align: center;color: #afafaf">
                <p>创建收藏夹</p>
            </div>
            <div th:if="${cstatic!=1}" th:each="uc:${allCollect}" class="bMCollectTag">
                <p th:text="${uc.CName}"></p>
            </div>
        </div>
        <div class="bMCollectRightDiv">
            <a th:href="@{#}">
                <div class="bMCollectVideo">
                    <img class="bMCollectVideoImg" th:src="@{/images/DenLongJie.jpg}">
                    <p class="bMCollectVideoName" style="color: black">宠物金轮asdfasdfasdfadfasdfasdfafdasdf</p>
                    <p style="font-size: 13px">
                        收藏于 11-11
                    </p>
                </div>
            </a>
        </div>
    </div>
<script th:src="@{/js/jquery-360.min.js}"></script>
<script>
    $(function () {
        var bMCollectTag = document.getElementsByClassName("bMCollectTag");
        var bMCollectRightDiv = document.getElementsByClassName("bMCollectRightDiv")[0];
        var cIndex = 0;
        for (let i = 0; i < bMCollectTag.length ; i++) {
            bMCollectTag[i].onclick = function () {
                bMCollectTag[cIndex].style.backgroundColor="#ffffff";
                bMCollectTag[cIndex].style.color="#000000";
                bMCollectTag[i].style.backgroundColor="#c3c3c3";
                bMCollectTag[i].style.color="#ffffff";
                $.ajax({
                    url:"/bmColl",
                    type:"post",
                    data:{
                        "cName":bMCollectTag[i].querySelector("p").innerText
                    },
                    success:function (data) {
                        $(".bMCollectRightDiv").empty();
                        var collect = data.map.collectMsg;
                        console.log(collect);
                        for (let j = 0; j < collect.length ; j++) {
                            var collectA = document.createElement("a");
                            collectA.href="/bhsy/video/"+collect[j].vuid+"/"+collect[j].vid;
                            var bMCollectVideo = document.createElement("div");
                            bMCollectVideo.className="bMCollectVideo";
                            var bMCollectVideoImg = document.createElement("img");
                            bMCollectVideoImg.className="bMCollectVideoImg";
                            bMCollectVideoImg.src=collect[j].vimg;
                            bMCollectVideo.appendChild(bMCollectVideoImg);
                            var bMCollectVideoName = document.createElement("p");
                            bMCollectVideoName.className="bMCollectVideoName";
                            bMCollectVideoName.innerText=collect[j].vname;
                            bMCollectVideoName.style.color="black";
                            bMCollectVideo.appendChild(bMCollectVideoName);
                            var bMCollectP = document.createElement("p");
                            bMCollectP.style.fontSize="13px";
                            bMCollectP.innerText="收藏于  "+new Date(collect[j].ctime).format("yyyy-MM-dd hh:mm:ss");
                            bMCollectVideo.appendChild(bMCollectP);
                            collectA.appendChild(bMCollectVideo);
                            bMCollectRightDiv.appendChild(collectA);
                        }
                    }
                })
                cIndex = i;
            }
        }
    })
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
</script>
</body>
</html>